<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>画布设计器</title>
  <style>
      @keyframes fadeIn {
          from {
              opacity: 0.01;
          }

          to {
              opacity: 1;
          }
      }

      @keyframes fadeOut {
          from {
              opacity: 1;
          }

          to {
              opacity: 0;
          }
      }

      @keyframes slideIn {
          from {
              transform: translateY(20px);
          }

          to {
              transform: translateY(0);
          }
      }

      @keyframes slideOut {
          from {
              transform: translateY(0);
          }

          to {
              transform: translateY(-20px);
          }
      }

      @keyframes loading-track {
          0% {
              transform: translateX(0) scaleX(0);
          }

          10% {
              transform: translateX(0) scaleX(0.2);
          }

          40% {
              transform: translateX(0) scaleX(0.7);
          }

          60% {
              transform: translateX(60%) scaleX(0.4);
          }

          100% {
              transform: translateX(100%) scaleX(0.2);
          }
      }

      #loading-page {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 99;
          background-color: #fff;
          font-family:
                  DIN alternate,
                  -apple-system,
                  blinkmacsystemfont,
                  'Helvetica Neue',
                  helvetica,
                  segoe ui,
                  arial,
                  roboto,
                  'PingFang SC',
                  miui,
                  'Hiragino Sans GB',
                  'Microsoft Yahei',
                  sans-serif;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          opacity: 0.01;
          animation: 0.4s ease-in-out 1 forwards fadeIn;
      }

      #loading-page.out {
          animation: 14s ease-in-out 14s 1 forwards fadeOut;
          opacity: 1;
      }

      #loading-page-inner {
          max-width: 100%;
          width: 160px;
          margin: auto auto;
          position: relative;
      }

      #loading-page .loading-logo {
          width: 100%;
          text-align: center;
          transform: translateY(20px);
          animation: 0.4s ease-in-out 1 forwards slideIn;
          padding-bottom: 20px;
          font-size: 22px;
          line-height: 30px;
          color: #314666;
      }

      #loading-page.out .loading-logo {
          animation: 0.4s ease-in-out 0.4s 1 forwards slideOut;
          transform: translateY(0);
      }

      #loading-page .loading-progress {
          margin-top: 16px;
          width: 100%;
          height: 4px;
          border-radius: 4px;
          overflow: hidden;
          background-color: #f2f3f9;
          position: relative;
      }

      #loading-page .loading-track {
          height: 100%;
          width: 100%;
          background-color: #1055ff;
          border-radius: 4px;
          transition: 0.4s;
          animation: loading-track 1.3s infinite linear;
          transform-origin: 0 50%;
      }
  </style>
</head>
<body>
<div id="app"></div>
<div id="loading-page" class="out" style="display: none"
><div id="loading-page-inner"
><div class="loading-logo">画布设计器</div
><div class="loading-progress"
><div class="loading-track"></div></div></div
></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
